<template>
  <view class="container" v-if="userInfo">
    <!-- 顶部用户明细 -->
    <view class="bg-white p-[30rpx]">
      <view class="flex items-center">
          <view class="flex-1 flex items-center">
              <u-avatar :src="userInfo.avatar||defaultAvatar" size="50" shape="square"/>
              <view class="ml-[20rpx] text-[#888] text-[24rpx]">
                  <view>
                    <text class="text-[#000] text-[28rpx] font-bold">{{userInfo.name}}</text>
                    <text class="text-[#999] ml-[10rpx]">({{userInfo.uid}})</text>
                    <text v-if="userInfo.status==-1" class="text-[#f00] ml-[10rpx]">黑名单</text>
                  </view>
                  <view v-if="userInfo.description" class="mt-[10rpx]">描述：{{userInfo.description}}</view>
                  <view class="mt-[10rpx]">性别：{{ ['未知', '男', '女'][userInfo.gender||0]}}</view>
              </view>
          </view>
          <view class="text-primary">{{userInfo.jieduanname}}</view>
      </view>
      <view class="mt-[20rpx] flex flex-wrap text-[#555]">
        <view class="w-[50%]">电话：{{userInfo.mobile||'--'}}</view>
        <view class="w-[50%]">生日：{{userInfo.birthday||'--'}}</view>
        <view class="w-[100%]">地址：{{userInfo.address||'--'}}</view>
      </view>
      <view class="flex items-center justify-between mt-[20rpx] pt-[20rpx] pb-[20rpx] bg-[#f3f3f3]">
          <view class="flex-1 flex flex-col items-center justify-center">
              <view class="text-[#777]">用户等级</view>
              <view class="text-[#444] font-bold">{{ userInfo.level||'未注册' }}</view>
          </view>
          <view class="flex-1 flex flex-col items-center justify-center">
              <view class="text-[#777]">累计答题</view>
              <view class="text-[#444] font-bold">{{ userInfo.dati_count||0 }}次</view>
          </view>
          <view class="flex-1 flex flex-col items-center justify-center">
              <view class="text-[#777]">累计红包</view>
              <view class="text-[#444] font-bold">{{ userInfo.hongbao_money||0 }}元</view>
          </view>
      </view>
      <view class="flex items-center justify-space-between mt-[30rpx]">
          <view class="flex-1 flex items-center">
              <text>Ta添加的：</text>
              <view class="flex-1 flex items-center pl-[20rpx]" @click="handler(1)">
                  <template v-for="(item, index) in relationList.slice(0,3)" :key="index">
                    <u-avatar class="ml-[-20rpx]" :src="userInfo.avatar||defaultAvatar" size="20"/>
                  </template>
                  <text class="ml-[10rpx]">共{{ userInfo.relation_num||0 }}个员工</text>
                  <up-icon name="arrow-right" size="12"></up-icon>
              </view>
          </view>
          <view class="flex items-center" @click="handler(2)">
              <text>共{{ userInfo.chat_num||0 }}个群聊</text>
              <up-icon name="arrow-right" size="12"></up-icon>
          </view>

      </view>
    </view>
    <!-- 标签 -->
    <view v-if="false" class="mt-[20rpx] bg-white p-[30rpx]">
      <view class="flex items-center justify-between">
        <text>客户标签</text>
        <text class="text-primary" @click="handler(3)">编辑标签</text>
      </view>
      <view class="relative">
          <template v-for="(item, index) in tagList" >
            <view v-if="index<2 || isExpand" :key="index">
                <text class="text-[28rpx] text-[#999]">{{ item.group_name }}：</text>
                <up-tag v-for="(citem, cindex) in item.list" :key="cindex" class="mr-[20rpx] mt-[20rpx]" type="warning" plain plainFill size="mini">{{ citem.tag_name }}</up-tag>
            </view>
          </template>
          <view class="more flex items-center justify-center mt-20rpx pt-[20rpx]" v-if="tagList.length>2" @click="isExpand = !isExpand;">
            <text class="text-[#999] text-[24rpx]">{{isExpand?'收起':'展开'}}</text>
            <up-icon :name="isExpand?'arrow-up':'arrow-down'" color="#999" size="24rpx"></up-icon>
          </view>
      </view>
    </view>
    <!-- 服务 -->
    <view class="mt-[20rpx] bg-white">
      <up-tabs :list="tabs" @click="handleTabChange"></up-tabs>
      <!-- 活动轨迹 -->
      <view v-if="active===0" class="p-[30rpx] pt-0">
          <view v-if="tabs[active].list.length !== 0">
            <view class="travel-item" v-for="(item, index) in tabs[active].list" :key="index">
              <view class="travel-item__left">
                <view class="travel-item__time bold" v-if="getTime(item, tabs[active].list[index-1]).d">{{ getTime(item, tabs[active].list[index-1]).d}}</view>
                <view class="travel-item__time" v-if="getTime(item, tabs[active].list[index-1]).t">{{ getTime(item, tabs[active].list[index-1]).t }}</view>
              </view>
              <view class="travel-item__right">
                  <view class="travel-item__title">参与活动</view>
                  <view class="travel-item__info">
                    <up-image class="travel-item__up-image" show-loading :src="item.huodong_image" width="120rpx" height="120rpx" />
                    <view class="flex-1">
                      <view class="row">活动：{{ item.huodong_name }}</view>
                      <view class="row">奖励：{{ item.hongbao_money }}¥</view>
                      <view class="row">时长：{{ format(item.play_time) }}</view>
                    </view>
                  </view>
              </view>
            </view>
          </view>
          <view v-if="tabs[active].list.length === 0" class="empty">暂无数据</view>
      </view>
      <!-- 跟进记录 -->
      <view v-if="active===1" class="p-[30rpx] pt-0">
          <view v-if="tabs[active].list.length !== 0">
            <view class="fw-item" v-for="(item, index) in tabs[active].list" :key="index">
                <!-- <img src="/static/images/liaotian.png" alt=""> -->
                <view class="w-[100%]">
                    <view class="flex items-center justify-between">
                        <text class="text-[#888]">{{ item.adddate }}</text>
                        <view class="text-primary" @click="handler(4, item)">编辑</view>
                    </view>
                    <view>
                        <text class="text-[#888] mr-[20rpx]">{{ item.kefu||'客服' }}</text>
                        <text v-if="item.leixing">发表：<text class="text-primary">{{ item.leixing }}类客户</text></text>
                    </view>
                    <view class="mt-[20rpx]">{{ item.content }}</view>
                    <up-image v-if="item.image" width="140rpx" height="140rpx" :src="item.image" />
                </view>
            </view>
          </view>
          <view v-if="tabs[active].list.length === 0" class="empty">暂无数据</view>
      </view>
      <!-- 订单 -->
      <view v-if="active===2" class="p-[30rpx] pt-0">
          <view v-if="tabs[active].list.length !== 0">
            <view class="flex  mb-[20rpx]" v-for="(item, index) in tabs[active].list" :key="index">
              <up-image :src="item.product_image" width="40px" height="40px" />
              <view class="text-[28rpx] ml-[20rpx]">
                  <view class="mb-[10rpx]">商品：{{ item.product_title }}</view>
                  <view class="mb-[10rpx]">
                      <text>价格：<text class="text-[#f30] font-bold">{{ item.money }}</text></text>
                      <text class="ml-[30rpx]">商品原价：{{ item.product_totalmoney }}</text>
                      <text class="ml-[30rpx]">数量：{{ item.num||0 }}件</text>
                  </view>
                  <view class="mt-[10rpx]" >
                      <text class="text-[#999] text-[24rpx]">{{ item.adddate }}</text>
                  </view>

              </view>
          </view>
          </view>
          <view v-if="tabs[active].list.length === 0" class="empty">暂无数据</view>
      </view>
    </view>

    <up-tabbar @change="handler">
      <up-tabbar-item text="编辑信息" :name="5" icon="http://static.fastht.com/4e800c2e998186bb/258513d99e1b74a6.png"></up-tabbar-item>
      <up-tabbar-item text="添加订单" :name="6" icon="http://static.fastht.com/46106c1567e669a3/4d2e549a4b371658.png" ></up-tabbar-item>
      <up-tabbar-item text="添加跟进" :name="4" icon="http://static.fastht.com/06fb980ad6c415a9/b3e4e2d8d65c9e60.png"></up-tabbar-item>
    </up-tabbar>
    <edit-info ref="editInfoRef"></edit-info>
    <edit-user ref="editUserRef" @change="getDetail"></edit-user>
    <edit-tag ref="editTagRef" :userId="userId" @change="getDetail"></edit-tag>
    <edit-order ref="editOrderRef"></edit-order>
    <qun-list ref="qunListRef"></qun-list>
    <member-list ref="memberListRef"></member-list>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { getCurExternalContact, qyLogin, register } from '@/addon/htscrm/utils/qyCodeAuth'
import EditUser from '../../qywork/components/edit-user.vue'
import EditOrder from '../../qywork/components/edit-order.vue'
import EditInfo from '../../qywork/components/edit-info.vue'
import EditTag from '../../qywork/components/edit-tag.vue'
import { getAdminCustomerDetailApi, getUserInfoApi } from '@/addon/htscrm/api';
import QunList from '../../qywork/components/qun-list.vue'
import MemberList from '../../qywork/components/member-list.vue'
import { setQyworkToken } from '@/addon/htscrm/utils/storage';
// import WebsocketUtil from '@/addon/htscrm/utils/socket-util'

// const socket = new WebsocketUtil('https://wss.zangft.com/wss')

const defaultAvatar = "http://static.fastht.com/b58a61c649ac8871/fa87d808bf4e677a.png"

const userId = ref('')
const userInfo = ref()
const tagList = ref()
const relationList = ref([])
const chatList = ref([])

// 标签位置展开收起
const isExpand = ref(false)

// 服务数据
const active = ref(0)
const tabs = ref([
  {
    name: '活动轨迹',
    list: []
  },
  {
    name: '跟进记录',
    list: []
  },
  {
    name: '订单',
    list: []
  }
])

onLoad(async (options:any) => {
  
  getDetail(options.id)

})


/**
 * 获取用户信息
 */
async function getDetail(id:any) {
  const res:any = await getAdminCustomerDetailApi(id)
  
  if(res.code == 1) {
    const { user_info, tags_list, relation_list, chat_list } = res.data
    userInfo.value = user_info
    tagList.value = tags_list
    relationList.value = relation_list
    chatList.value = chat_list
  }
}

const memberListRef = ref()
const qunListRef = ref()
const editTagRef = ref()
const editInfoRef = ref()
const editUserRef = ref()
const editOrderRef = ref()
/**
 * 操作
 * @param e 
 */
function handler(index:number, item) {
  switch (index) {
    case 1:
      // 员工列表
      memberListRef.value.showPopup(relationList.value)
      break;
    case 2:
      // 群列表
      qunListRef.value.showPopup(chatList.value)
      break;
    case 3:
      // 编辑标签
      editTagRef.value.showPopup()
      break;
    case 4:
      // 添加/编辑跟进记录
      editInfoRef.value.showPopup()
      break;
    case 5:
      // 编辑信息
      console.log(111);
      
      editUserRef.value.open(userInfo)
      break;
    case 6:
      // 添加订单
      editOrderRef.value.showPopup()
      break;
  
    default:
      break;
  }
}

function handleTabChange(e:any) {
  active.value = e.index
}

function getTime() {
  return {}
}

function format() {
  return ''
}


</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f6f7f8;
}

.more {
  border-top: 1px solid #eee;
}

.menu {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 2;
	background: #fff;
	height: 60px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.travel-item {
  display: flex;
  margin-bottom: 16rpx;

  &__left {
    white-space: nowrap;
    position: relative;
    width: 100rpx;

    &::after {
      content: "";
      position: absolute;
      top: 70rpx;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 2px;
      background-color: #DBDADA;
    }
  }

  &__time {
    color: #9E9E9E;
    line-height: 26rpx;
    font-size: 26rpx;
    text-align: center;
    margin-top: 10rpx;
    &.bold {
      font-weight: bold;
      color: #000;
      font-size: 28rpx;
      margin-top: 0;
    }
  }

  &__right {
    flex: 1;
    margin-left: 16rpx;
  }

  &__image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 16rpx;
  }

  &__title {
    font-size: 28rpx;
  }

  &__info {
    display: flex;
    padding: 16rpx 20rpx;
    background-color: rgb(248, 248, 248);
    border-radius: 16rpx;
    align-items: center;
    margin-top: 32rpx;

    .flex-1 {
      flex: 1;
      overflow: hidden;
      margin-left: 16rpx;

      .row {
        font-size: 28rpx;
        line-height: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:not(:last-child) {
          margin-bottom: 16rpx;
        }
      }
    }
  }
}
.empty {
  color: #aaa;
  text-align: center;
  padding: 40px;
}
</style>